<template>
  <div class="user-menu">
    <div
      class="flex item hover-shadow"
      v-for="item in userModel.menu"
      :key="item.name"
      :class="{ 'item-active': item.active.includes(currenPath) }"
      @click="handJump(item)"
    >
      <div
        class="icon"
        :class="{ 'icon-active': item.active.includes(currenPath) }"
      >
        <i class="esayIcon" :class="[item.icon]"></i>
      </div>
      <span>{{ item.name }}</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import userModel from '@/views/my/viewModel/userModel'
import { menuItem } from '@/views/my/viewModel/userModel'
import { useRoute, useRouter } from 'vue-router'
import { computed } from 'vue'
const route: any = useRoute()
const router: any = useRouter()
const currenPath = computed(() => route.path)
const handJump = (e: menuItem) => {
  router.push(e.path)
}
</script>
<style scoped lang="scss">
.user-menu {
  margin-top: 16px;
  background: #fff;
  box-sizing: border-box;
  padding: 50px 0;
  cursor: pointer;
  border-radius: 12px;
  .item {
    padding: 10px 56px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    .icon {
      display: flex;
      align-items: center;
      i {
        font-size: 18px;
      }
      &-active {
        i {
          color: var(--yang-theme-color);
        }
      }
    }
    span {
      font-size: 16px;
      font-weight: 400;
      color: #333333;
      margin-left: 12px;
    }
    &-active {
      span {
        color: var(--yang-theme-color);
      }
    }
  }
}
</style>
